ibz-exp-calendar-content {
  display: block;
  padding: 5px 10px;
  --theme-color: #df0011;
  --theme-main-color: #ff7580;
  --theme-vice-color: #fce9eb;
  --size-font-size: 15px;
  --size-font-height: 26px;
  --size-height: 38px;
  --size-button: 32px;
  --size-button-size: 14px;
  &.blue {
    --theme-color: #35c6ff;
    --theme-main-color: #74d8ff;
    --theme-vice-color: #d5f3ff;
  }
  &.small {
    padding: 0;
    --size-font-size: 12px;
    --size-button-size: 12px;
    --size-height: 26px;
    --size-button: 20px;
  }
  .calendar-table {
    width: 100%;
    > .calendar-table-tbody {
      display: block;
      > tr {
        display: flex;
        flex-wrap: nowrap;

        > .current-month {
          button {
            color: #888888;
          }
        }
        > .other-month {
          button {
            color: #cccccc;
          }
        }
        > .range-section {
          button {
            background-color: var(--theme-vice-color);
            color: #000;
          }
        }
        > .start-section,
        > .end-section {
          button {
            background-color: var(--theme-main-color);
            color: #fff;
          }
        }
        > .start-section,
        > .end-section,
        > .range-section {
          > div {
            position: relative;
            &::after {
              content: '';
              display: block;
              background-color: var(--theme-vice-color);
              width: 100%;
              height: var(--size-button);
              position: absolute;
              z-index: 0;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%);
            }
          }
        }
        > .start-section {
          > div::after {
            width: 50%;
            left: 51%;
            transform: translateY(-50%);
          }
        }
        > .end-section {
          > div::after {
            left: -1px;
            width: 50%;
            transform: translateY(-50%);
          }
        }
        > td:first-child {
          > div::after {
            left: 51%;
            width: 50% !important;
            transform: translateY(-50%) !important;
          }
          &.end-section {
            > div::after {
              display: none;
            }
          }
        }
        > td:last-child {
          > div::after {
            left: -1px !important;
            width: 50% !important;
            transform: translateY(-50%) !important;
          }
          &.start-section {
            > div::after {
              display: none;
            }
          }
        }
        > th,
        td {
          flex-grow: 1;
          font-size: var(--size-font-size);
          height: var(--size-height);
          line-height: var(--size-height);
          font-weight: 500;
        }
        > td {
          cursor: pointer;
          text-align: center;
          > div {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          button {
            height: var(--size-button);
            line-height: var(--size-button);
            width: var(--size-button);
            font-size: var(--size-button-size);
            border-radius: 3px;
            border: none;
            position: relative;
            z-index: 2;
            text-align: center;
            background-color: transparent;
            cursor: pointer;
            transition: background-color, border-radius 0.3s, 0.3s;
          }
        }
        > .cell-today {
          button {
            border-radius: 50%;
            background-color: var(--theme-color);
            color: #fff;
          }
        }
      }
    }
  }
}
